<template>
	<view class="content">
		<!-- <view class="header">确认订单</view> -->
		<!-- shr为收货人 -->
		<view class="shr">
			<view>
				<uni-icons type="location" size="40"></uni-icons>
			</view>
			<view class="shr_2">
				<navigator class="clear"  url="/pages/sh_address/sh_address" >
					<view class="shr_211">收货人：{{shr_data.name}}</view>
					<view class="shr_212">{{shr_data.phone}}</view>
				</navigator>
				<view class="shr_22">{{shr_data.address}}</view>
			</view>
			<view>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>
		<!-- sp为商品信息和数量 -->
		<view class="sp">
			<view class="spxx clear">
				<view>
					<image :src="sp_data.img" mode="" class="spxx_tp"></image>
				</view>
				<view class="spxx_c">
					<view>{{sp_data.name}}</view>
					<view>{{sp_data.color}}&emsp;{{sp_data.size}}</view>
				</view>
				<view class="spxx_sl clear">
					<view>&yen;&ensp;{{sp_data.price}}</view>
					<view>&times;&ensp;{{sp_data.num}}</view>
				</view>
			</view>
			<view class="spsl">
				<view>购买数量</view>
				<view>
					<button type="default" size="mini" @click="change_num(-1)">-</button>
					<text>{{sp_data.num}}</text>
					<button type="default" size="mini" @click="change_num(1)">+</button>
				</view>
			</view>
		</view>  
		<!-- yh为优惠 -->
		<view class="yh" @click="toggle('bottom','yh')">
			<view>优惠</view>
			<view>
				<text>{{yh_zt}}</text>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>
		<!-- ps为配送方式 -->
		<view class="ps" @click="toggle('bottom','ps')">
			<view>配送方式</view>
			<view>
				<text>{{ps_zt}}</text>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>
		<!-- ly为买家留言 -->
		<view class="ly">
			<view>买家留言</view>
			<input type="text" value="" placeholder="给卖家留言"/>
		</view>
		<!-- lb为留白 -->
		<view class="lb">
			<!-- <button class="button" type="primary" @click="toggle('bottom')">
				<text class="button-text">底部</text>
			</button> -->

				<!-- 普通弹窗 -->
				<uni-popup ref="popup" background-color="#fff" @change="change">
					<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
						<view class="tk_xx" v-for="item in isSel=='yh'?sp_data.yh_xx:sp_data.ps_xx" >
							<view @click="isSel=='yh'?change_yh(item):change_ps(item)">
								<text>{{item}}</text>
								<view v-if="item==yh_zt || item==ps_zt">
									<uni-icons type="checkbox-filled" size="30" color="#fa0000"></uni-icons>
								</view>
								<view v-else>
									<uni-icons type="checkbox" size="30"></uni-icons>
								</view>
							</view>
						</view>
						<!-- <view class="tk_footer" @click="change_T()">确定</view> -->
					</view>
				</uni-popup>
		</view>
		<view class="footer">
			<view>
				共<text>{{all_num}}</text>件，合计：<text>&yen;&ensp;{{all_cost}}</text>
			</view>
			<navigator url="/pages/spxq_wyc/pay_false" class="turn">结算</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',
				sp_data:{
					// [{
					id:'1',
					img:'../../static/person_image/黄宗泽.png',
					name:'2018年新款冲锋衣秋冬款新品推荐 户外冲锋衣',
					color:'红色',
					size:'L',
					price:'229',
					num:'1',
					yh_xx:['可使用十公里徒步里程减100元','可使用十公里自驾里程减10元','可使用十公里骑行里程减50元','不使用优惠'],
					ps_xx:['快递 免邮','快递 8.00 ￥']
				// },{
				// 	id:'’2',
				// 	img:'',
				// 	name:'2018年新款冲锋衣秋冬款新品推荐 户外冲锋衣',
				// 	color:'红色',
				// 	size:'L',
				// 	price:'229',
				// 	num:'1',
				// 	yh_xx:['可使用十公里徒步里程减100元','可使用十公里自驾里程减10元','可使用十公里骑行里程减50元','不使用优惠'],
				// 	ps_xx:['快递 免邮','快递 8.00 ￥'],
				// }],
				},
				shr_data:{
					name:'张小五',
					phone:'13945678912',
					address:'北京市 北京市平昌区 回龙观大街小区31号'
				},
				isSel:'',
				yh_zt:'可使用十公里徒步里程减100元',
				ps_zt:'快递 免邮',
				all_cost:'',
				all_num:''
			}
		},
		onShow(){
			this.all_count();
			console.log('已触发onShow');	
		},
		onLoad(){
			console.log('已触发onLoad');
		},
		onReady(){
			console.log('已触发onReady');
		},
		methods: {
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
				this.all_count()
			},
			toggle(type,v) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
				this.isSel=v;
			},
			change_yh(v){
				this.yh_zt=v
			},
			change_ps(v){
				this.ps_zt=v
			},
			change_num(v){
				if(this.sp_data.num>1 || v == 1){
					this.sp_data.num= v +Number(this.sp_data.num);
					this.all_count()
				}
			},
			all_count(){
				this.all_num = this.sp_data.num;
				let cost
				let num_yh = this.yh_zt.match(/\d+/g);
				let num_ps = this.ps_zt.match(/\d+/g);
				cost = Number(this.sp_data.num) * Number(this.sp_data.price);
				if(num_yh !== null) {
					cost-= Number(num_yh[0]);
				}
				if(num_ps !== null) {
					cost+=Number(num_ps[0]) ;
				};
				this.all_cost=cost
			},
		}
	}
	
</script>

<style lang="less" scoped>
	.popup-content{
		height: 750rpx;
		// .tk_footer{
		// 	position: absolute;
		// 	bottom: 0;
		// 	width: 100%;
		// 	background-color: #FF0000;
		// 	color: #FFFFFF;
		// 	text-align: center;
		// 	padding: 35rpx 0;
		// }
		.tk_xx>view{
			padding: 30rpx;
			padding-left: 20rpx;
			border-bottom: 1px solid #DBDBDB;
			display:flex;
			justify-content:space-between;
		}
	}

	.footer {
		background-color: #FFFFFF;
		display: flex;
		justify-content: flex-end;
		align-items:center;
		position: absolute;
		bottom: 0;
		width: 100%;
		.turn {
			background-color: #FF0000;
			padding: 45rpx 85rpx;
			color: #FFFFFF;
		}
		view {
			margin-right: 40rpx;
			>text{
				color: #ff0000;
				margin: 0 10rpx;
			}
		}
	}
	.lb{
		height: 132rpx;
		margin-bottom: 0rpx !important ;
		background-color: #FFFFFF;
	}
	.ly{
		background-color: #FFFFFF;
		display:flex;
		padding: 15rpx 15rpx 15rpx 30rpx;
		input{
			margin-left: 40rpx;
		}
	}
	.yh,.ps{
		background-color: #FFFFFF;
		display:flex;
		justify-content:space-between;
		padding: 15rpx 15rpx 15rpx 30rpx;
		view:last-child{
			display:flex;
			align-items:center;
		}
	}
	.sp{
		background-color: #FFFFFF;
		padding-left: 30rpx;
		overflow: hidden;
		.spxx {
			background-color: #FFFFFF;
			margin: 25rpx 0;
			.spxx_tp{
				float: left;
				width: 150rpx;
				height: 150rpx;
				margin-right: 30rpx;
				background-color: #F2F2F2;
			}
			.spxx_c{
				float: left;
				width: 420rpx;
				>view{
					width: 320rpx;
					font-size: 30rpx;
					padding: 12rpx 0 0 0;
				}
				view:last-child{
					color: #AAACC8;
				}
			}
			.spxx_sl{
				float: right;
				width: 120rpx;
				margin-top: 35rpx;
				view:last-child{
					margin-left: 30rpx;
					color: #AAACC8;
				}
			}
			
		}
		.spsl{
			border-top: 1px solid #DBDBDB;
			padding: 25rpx 0;
			display:flex;
			align-items:center;
			justify-content:space-between;
			view:last-child{
				display:flex;
				align-items:center;
				margin-right: 30rpx;
				>text{
					margin: 0 30rpx;
				}
			}
		}
	}
	.shr{
		border-top: 1px solid #DBDBDB;
		margin-top: 5rpx;
		background-color: #FFFFFF;
		display:flex;
		align-items:center;
		justify-content:space-around;
		.shr_2{
			width: 600rpx;
			margin-top: 50rpx;
			font-size: 38rpx;
			.shr_211{
				float: left;
			}
			.shr_212{
				float: right;
			}
			.shr_22 {
				margin: 20rpx 0;
				width: 500rpx;
				font-size: 30rpx;
				color: #AAACC8;
			}
		}
	}
	.content {
		background-color: #FAFAFA;
		>view { 
			margin-bottom: 30rpx;
		}
		.footer{
			margin-bottom: 0;
		}
	}
	.fh {
	  position: absolute;
	  top: 0;
	  line-height: 2.75rem;
	}
	.header {
	  margin: 0 auto;
	  display: flex;
	  justify-content: center;
	  background-color: white;
	  font-size: 1.25rem;
	  padding: 0.5rem;
	}
	.clear::after{
		content: "";
		display: block;
		clear: both;
	}
</style>
